import { useAppSelector } from '@/store';
import {
  clearOriginCommentAction,
  clearReplyCommentAction,
  getReplyCommentByIdAction,
} from '@/store/action/comment';
import { NavBar } from 'antd-mobile';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import CommentFooter from '../CommentFooter';
import CommentItem from '../CommentItem';
import NoComment from '../NoComment';
import styles from './index.module.scss';

export default function CommentReply() {
  const dispatch = useDispatch();
  const { originComment, replyData } = useAppSelector((state) => state.comment);
  useEffect(() => {
    if (!originComment.com_id) return;
    dispatch(getReplyCommentByIdAction(originComment.com_id));
  }, [dispatch, originComment.com_id]);

  useEffect(() => {
    return () => {
      dispatch(clearReplyCommentAction());
    };
  }, [dispatch]);
  return (
    <div className={styles.root}>
      <div className="reply-wrapper">
        <NavBar className="transparent-navbar" onBack={() => dispatch(clearOriginCommentAction())}>
          <div>{originComment.reply_count}条回复</div>
        </NavBar>

        <div className="origin-comment">
          {/* 2. 设置type为origin */}
          <CommentItem comment={originComment} type="origin" />
        </div>

        <div className="reply-list">
          <div className="reply-header">全部回复</div>
          {!replyData.results?.length ? (
            <NoComment />
          ) : (
            replyData.results.map((item) => (
              <CommentItem key={item.com_id} comment={item} type="reply" />
            ))
          )}
        </div>

        <CommentFooter type="reply" />
      </div>
    </div>
  );
}
